<include file="Public/header" />
<include file="Public/accountfooter" />
<div data-role="page" >
    <div data-role="header" data-position="fixed" data-tap-toggle="false"data-theme="h">
      <a href="#sharePanel" style="display:inline-block;margin-top:10px;" ><i class="fa fa-list"></i></a>
      <h1>柴米油盐</h1>
    </div>
    <include file="Public/common" />
    <div data-role="main" class="ui-content">
      <if condition="$accountErrorFlag eq 1">
          <div class="alert alert-danger alert-dismissible" role="alert">
            <a type="button" class="close" data-ajax="false"data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></a>
            <strong>Error：</strong><{$accountErrorInfo}>
          </div>
        <elseif condition="$accountErrorFlag eq 2"/>
          <div class="alert alert-success alert-dismissible" role="alert">
            <a type="button" class="close" data-ajax="false"data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></a>
            <strong>Success：</strong><{$accountErrorInfo}>
          </div>
        <elseif condition="$accountErrorFlag eq 3"/>
         <div class="alert alert-warning alert-dismissible" role="alert">
            <a type="button" class="close" data-ajax="false"data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></a>
            <strong>Warning:</strong><{$accountErrorInfo}>
          </div>
      </if>
        <div data-role="navbar">
        <ul>
          <li>
              <a href="#"><span class=""><font>预算  <i class="fa fa-rmb"></i>  <strong ><{$userBudget}></strong> 元 , </font>
              <font>支出  <i class="fa fa-rmb"></i>  <strong ><{$accountOut['monthOut']}></strong> 元</font></span></a>
          </li>
        </ul>
        </div>
        <table class="table  table-striped table-responsive text-center table-high">
          <tbody>
            <tr>
              <td><i class="fa fa-calendar"></i></td>
              <td>今日</td>
              <td>本周</td>
              <td>本月</td>
              <td>本年</td>
            </tr>
             <tr>
              <td>支出</td>
              <td>  <i class="fa fa-rmb"></i>  <strong ><{$accountOut['todayOut']}></strong>  </td>
              <td>  <i class="fa fa-rmb"></i>  <strong ><{$accountOut['weekOut']}></strong>  </td>
              <td>  <i class="fa fa-rmb"></i>  <strong ><{$accountOut['monthOut']}></strong>  </td>
              <td>  <i class="fa fa-rmb"></i>  <strong ><{$accountOut['yearOut']}></strong>  </td>
            </tr>
          </tbody>
        </table>
        <div data-role="navbar"class=" text-center">
          <ul>
            <li><a href="#">详细</a></li>
          </ul>
        </div>
        <div class="bs-example bs-example-tabs" data-example-id="togglable-tabs">
            <ul id="myTabs" class="nav nav-tabs" role="tablist">
              <li role="presentation" class="active">
                  <a href="#todayAccountRowsDiv" data-ajax="false" id="todayAccountRows-tab" role="tab" data-toggle="tab" aria-controls="todayAccountRowsDiv" aria-expanded="true">今日</a>
              </li>
              <li role="presentation">
                  <a href="#weekAccountRowsDiv" data-ajax="false"role="tab" id="weekAccountRowsDiv-tab" data-toggle="tab" aria-controls="weekAccountRowsDiv"aria-expanded="false">本周</a>
              </li>
              <li role="presentation">
                  <a href="#monthAccountRowsDiv" data-ajax="false"role="tab" id="monthAccountRowsDiv-tab" data-toggle="tab" aria-controls="monthAccountRowsDiv"  aria-expanded="false">本月</a>
              </li>
            </ul>
            <div id="myTabContent" class="tab-content">
              <div role="tabpanel" class="tab-pane fade in active" id="todayAccountRowsDiv" aria-labelledBy="todayAccountRowsDiv-tab">
                  <if condition="$todayAccountCount gt 0">                  
                   <div class="panel panel-success">
                       <div class="panel-heading text-center">
                         <font>今日 共有  <strong><{$todayAccountCount}></strong>  笔记账  </font>
                           <font>总支出  <i class="fa fa-rmb"></i>  <strong><{$accountOut['todayOut']}></strong></font>
                       </div>
                       <div data-role="navbar">
                           <ul>
                              <li><a href="#">名称</a></li>
                              <li><a href="#">类别</a></li>
                              <li><a href="#">金额</a></li>
                            </ul>
                       </div>
                    </div>
                      <volist name="todayAccountRows" id="vo">
                        <div onclick="accountDownTrToggle('#todayAccountTr<{$vo.accountid}>');">
                             <div class="ui-grid-b">
                                <div class="ui-block-a text-center" ><li class=" no-border list-group-item over-hidden"><font><{$vo.accountname}></font></li></div>
                                <div class="ui-block-b text-center"><li class=" no-border list-group-item over-hidden" ><font color="#FF0066"><{$vo.typename}></font></li></div>
                                <div class="ui-block-c text-center"><li class=" no-border list-group-item over-hidden"><font color="#CC3366"><strong><{$vo.accountmoney}></strong></font> <i class="fa fa-caret-down"></i></li></div>
                            </div>
                        </div>
                          <div class="account-down-tr well " hidden id="todayAccountTr<{$vo.accountid}>" >
                            <div class="list-group">
                              <div class="list-group-item">
                                <h5><small>账目名称: <{$vo.accountname}></small></h5>
                              </div>
                              <div class="list-group-item">
                                <h5><small>账目日期: <{$vo.accountdate}></small></h5>
                              </div>
                              <div class="list-group-item">
                                <h5><small>记录时间: <{$vo.notetime}></small></h5>
                              </div>
                              <div class="list-group-item">
                                <h5><small>相关备注： <{$vo.accountother}></small></h5>
                              </div>
                              <div class="list-group-item">
                                <button type=""><a href="__CONTROLLER__/deleteAccount/id/<{$vo.accountid}>" data-ajax="false" onclick="javascript:return myNoteDeleteConfirm();" class="btn btn-sm btn-danger btn-xs width100"><font class="color-fff">删除</font></a></button>
                                <h5><small><i class="fa fa-info"></i>  ： 删除后相应账目自动计算！</small></h5>
                              </div>
                            </div>
                         </div>
                      </volist>
                   <else/>
                         <div class="col-md-12 text-center">
                           <h4><i class="fa fa-warning fa-2x"></i>  暂无支出</h4>
                         </div>
                   </if>
              </div><!--today tab panel end-->
              <div role="tabpanel" class="tab-pane fade " id="weekAccountRowsDiv" aria-labelledBy="weekAccountRowsDiv-tab">
                 <if condition="$weekAccountCount gt 0">                  
                   <div class="panel panel-warning">
                       <div class="panel-heading text-center">
                           <font>本周 共有  <strong><{$weekAccountCount}></strong>  笔记账  </font>
                             <font>支出  <i class="fa fa-rmb"></i>  <strong><{$accountOut['todayOut']}></strong></font>
                       </div>
                       <div data-role="navbar">
                           <ul>
                              <li><a href="#">名称</a></li>
                              <li><a href="#">类别</a></li>
                              <li><a href="#">金额</a></li>
                            </ul>
                       </div>
                   </div>
                    <volist name="weekAccountRows" id="vo">
                      <div onclick="accountDownTrToggle('#weekAccountTr<{$vo.accountid}>');">
                           <div class="ui-grid-b">
                              <div class="ui-block-a text-center" ><li class="no-border list-group-item over-hidden"><font><{$vo.accountname}></font></li></div>
                              <div class="ui-block-b text-center"><li class="no-border list-group-item over-hidden" ><font color="#FF0066"><{$vo.typename}></font></li></div>
                              <div class="ui-block-c text-center"><li class="no-border list-group-item over-hidden"><font color="#CC3366"><strong><{$vo.accountmoney}></strong></font> <i class="fa fa-caret-down"></i></li></div>
                          </div>
                      </div>
                        <div class="account-down-tr well " hidden id="weekAccountTr<{$vo.accountid}>" >
                          <div class="list-group">
                            <div class="list-group-item">
                              <h5><small>账目名称: <{$vo.accountname}></small></h5>
                            </div>
                            <div class="list-group-item">
                              <h5><small>账目日期: <{$vo.accountdate}></small></h5>
                            </div>
                            <div class="list-group-item">
                              <h5><small>记录时间: <{$vo.notetime}></small></h5>
                            </div>
                            <div class="list-group-item">
                              <h5><small>相关备注： <{$vo.accountother}></small></h5>
                            </div>
                            <div class="list-group-item">
                              <button type=""><a href="__CONTROLLER__/deleteAccount/id/<{$vo.accountid}>" data-ajax="false" onclick="javascript:return myNoteDeleteConfirm();" class="btn btn-sm btn-danger btn-xs width100"><font class="color-fff">删除</font></a></button>
                              <h5><small><i class="fa fa-info"></i>  ： 删除后相应账目自动计算！</small></h5>
                            </div>
                          </div>
                       </div>
                    </volist>
                 <else/>
                   <div class="well text-center">
                     <h4><i class="fa fa-warning fa-2x"></i>  暂无支出</h4>
                   </div>
               </if>
              </div><!--week panel-->
              <div role="tabpanel" class="tab-pane fade in " id="monthAccountRowsDiv" aria-labelledBy="monthAccountRowsDiv-tab">
                  <if condition="$monthAccountCount gt 0">                  
                    <div class="panel panel-info">
                       <div class="panel-heading text-center">
                         <font>本月 共有  <strong><{$monthAccountCount}></strong>  笔记账  </font>
                           <font>支出  <i class="fa fa-rmb"></i>  <strong><{$accountOut['monthOut']}></strong></font>
                       </div>
                       <div data-role="navbar">
                         <ul>
                            <li><a href="#">名称</a></li>
                            <li><a href="#">类别</a></li>
                            <li><a href="#">金额</a></li>
                          </ul>
                       </div>
                    </div>
                      <volist name="monthAccountRows" id="vo">
                      <div onclick="accountDownTrToggle('#monthAccountTr<{$vo.accountid}>');">
                           <div class="ui-grid-b">
                              <div class="ui-block-a text-center" ><li class="no-border list-group-item over-hidden"><font><{$vo.accountname}></font></li></div>
                              <div class="ui-block-b text-center"><li class="no-border list-group-item over-hidden" ><font color="#FF0066"><{$vo.typename}></font></li></div>
                              <div class="ui-block-c text-center"><li class="no-border list-group-item over-hidden"><font color="#CC3366"><strong><{$vo.accountmoney}></strong></font> <i class="fa fa-caret-down"></i></li></div>
                          </div>
                      </div>
                        <div class="account-down-tr well " hidden id="monthAccountTr<{$vo.accountid}>" >
                            <div class="list-group">
                              <div class="list-group-item">
                                <h5><small>账目名称: <{$vo.accountname}></small></h5>
                              </div>
                              <div class="list-group-item">
                                <h5><small>账目日期: <{$vo.accountdate}></small></h5>
                              </div>
                              <div class="list-group-item">
                                <h5><small>记录时间: <{$vo.notetime}></small></h5>
                              </div>
                              <div class="list-group-item">
                                <h5><small>相关备注： <{$vo.accountother}></small></h5>
                              </div>
                              <div class="list-group-item">
                                <button type=""><a href="__CONTROLLER__/deleteAccount/id/<{$vo.accountid}>" data-ajax="false" onclick="javascript:return myNoteDeleteConfirm();" class="btn btn-sm btn-danger btn-xs width100"><font class="color-fff">删除</font></a></button>
                                <h5><small><i class="fa fa-info"></i>  ： 删除后相应账目自动计算！</small></h5>
                              </div>
                            </div>
                        </div>
                      </volist>
                     </div>
                   <else/>
                     <div class="col-md-12 text-center">
                       <h4><i class="fa fa-warning fa-2x"></i>  暂无支出</h4>
                     </div>
                  </if>
              </div><!--month panel end-->
        </div><!--tab-centent end-->
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <font class="panel-title">消费比例</font>
        </div>
        <div class="panel-body ">
          <div class="col-md-12 text-center">
          <h4>本月已经消费：  <i class="fa fa-rmb"></i>  <{$accountOut['monthOut']}></h4>
            <hr>
          </div>
              <div class="col-md-12">
                <div id="noShowPie" class="text-center" >
                 <div id="canvas-holder"  class="visible-lg" >
                      <canvas id="chart-area1" width="300px" height="300px"/>
                  </div>
                  <div id="canvas-holder" >
                      <canvas id="chart-area2" />
                  </div>
                </div>
                <if condition="$monthAccountCount gt 0">
                  <div class="col-md-3 pull-right text-center visible-lg">
                      <div class="list-group" id="pieShowItem">
                      </div>
                  </div>
                </if>
              </div>
          </div>
        </div>
        <div class="col-md-3" >
              
            <section class="side-div">
                  <div class="panel panel-default">
                    <div class="panel-heading">
                       <font >本周消费状况</font>
                    </div>
                    <div class="panel-body">
                       <div id="canvas-holder-line" >
                            <canvas id="chart-area-line" width="100%" height="60%"></canvas>
                       </div>
                       <div class="col-md-12" id="lineItemMoney">
                       </div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading">
                       <font >近期日均消费状况</font>
                    </div>
                    <div class="panel-body">
                       <div id="canvas-holder-bar" >
                            <canvas id="chart-area-bar" width="100%" height="60%"></canvas>
                       </div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading">
                       <font >本月最高日消费记录</font>
                    </div>
                    <div class="panel-body" id="monthMostMoney">

                    </div>
                  </div>
            </section>
        </div>
<script>
    judgeInputValue();
    accountIndexShowPie();
</script>

<include file="Public/footer"/>